@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
header{
    position: absolute;
    top: 0;
    width: 100%;
    height: vw(76);
    li{
        width:50%;
        height: vw(74);
        list-style: none;
        float: left;
        background: white;
        text-align: center;
        line-height: vw(74);
        color: #333333;
    }
    li:hover{
        border-bottom: 2px solid #333333;
    }
    .recruit-bottom{
         border-bottom: 2px solid #333333;
    }
    
}
section{
    width:100%;
    position: absolute;
    top: vw(76);
    bottom: vw(50);
    overflow-y: scroll;
    .recruit-banan{
        width:100%;
        height: vw(160);
        position: relative;
        img{
            width: 100%;
            height: 100%;
        }
        .recruit-banan-1{
            position: absolute;
            top: 0;
            left: 0;
            p{
                margin-left: vw(175);
                margin-top: vw(62);
                font-size: vw(30);
                color: white;
                a{
                    font-size: vw(30);
                    font-weight: bold;
                    margin: 0 vw(20);
                }
            }
        }
    }
    .recruit-banan2{
        width:100%;
        height: vw(268);
        margin-top: vw(2);
        .recruit-banan2-1{
            width:vw(286);
            height: vw(268);
            .recruit-banan2-11{
                width: vw(286);
                height: vw(135);
                position: relative;
                filter: url(blur.svg#blur);
                -webkit-filter: blur(3px);
                filter: blur(3px);  
                filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  
                img{
                    width: 100%;
                    height: 100%;
                }
                .recruit-banan2-111{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    p{
                       text-align: center;
                        margin-top: vw(53);
                        color: white;
                    }
                }
            }
            .recruit-banan2-12{
                margin-top: vw(2);
                width: vw(286);
                height: vw(131);
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                .recruit-banan2-112{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    p{
                        text-align: center;
                        margin-top: vw(51);
                        color: white;
                    }
                }
            }
        }
        .recruit-banan2-2{
            width: vw(351);
            height: vw(268);
            position: relative;
            margin-left: vw(3);
            img{
                width:100%;
                height: 100%;
            }
            .recruit-banan2-21{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    p{
                        text-align: center;
                        margin-top: vw(100);
                        color: white;
                    }
                }
        }
    }
    .recruit-fund{
        width: 100%;
        height: vw(154);
        li{
            list-style: none;
            float: left;
            width: vw(75);
            height: vw(110);
            margin-top: vw(24);
            margin-left: vw(75);
            img{
                width:vw(75);
                height: vw(75);
            }
            p{
                font-size: vw(20);
                text-align: center;
            }
        }
        li:first-child{
            margin-left: vw(40);
        }
    }
.recruitfonta{
    animation: bian 2s ease;
}
@keyframes bian{
    0%{transform-origin:top left;transform: scale(0.2) rotate(45deg);}
    25%{transform-origin:top left;transform: scale(0.2) rotate(15deg);}
    50%{transform-origin:top left;transform: scale(0.2) rotate(45deg);}
    75%{transform-origin:top left;transform: scale(0.2) translateY(900px);}
    90%{transform-origin:top left;transform: scale(0.2) translate(500px,500px);}
    100%{transform: scale(1);}
}
 .outfit{
        width: 100%;
        height: vw(61);
        background: #f2f2f2;
        li{
            width: vw(212);
            height: vw(61);
            list-style: none;
            float: left;
            text-align: center;
            line-height: vw(61);
            font-size: vw(20);
            position: relative;
        }
        li:after{
            content: "";
            position: absolute;
            border-top: vw(8) solid black;
            border-right:vw(10) solid transparent;
            border-left:vw(10) solid transparent;
            border-bottom: 0;
            top: 45%;
            left:61%;
        }
    }
    .bee-photo{
        width: 100%;
        height: vw(300);
        position: relative;
        margin-bottom: vw(8);
        img{
            width: 100%;
            height: 100%;
        }
        .recruit-font{
            position: absolute;
            top: 0;
            left: 0;
            width:vw(640);
            height: vw(300);
            background: rgba(0,0,0,0.5);
            text-align: center;
            input[type="button"]{
                width: vw(55);
                height: vw(30);
                background: transparent;
                border: 1px solid white;
                border-radius: vw(8);
                color: white;
                font-size: vw(16);
                margin-top:vw(30)
            }
            input[type="button"]:nth-child(2){
                margin-left: vw(0);
            }
            h1{
                margin-top: vw(10);
                font-size: vw(30);
                font-weight: normal;
                color: white;
                a{
                    font-weight: bolder;
                    padding: 0 vw(10);
                }
            }
            h2{
                margin-top: vw(10);
                font-size: vw(20);
                font-weight: normal;
                color: white;
            }
            h4{
                margin-top: vw(10);
                font-size: vw(20);
                font-weight: normal;
                color: white;
            }
            .recruit-font1{
                width:100%;
                height: vw(46);
                background:rgba(0,0,0,.2);
               
                border-radius: vw(8);
                margin-top: vw(20);
                h3{
                    text-align: center;
                    line-height: vw(46);
                    color: white;
                    font-size: vw(28);
                    font-weight: normal;
                    opacity: 1;
                }
            }
            p{
                margin-top: vw(10);
                font-size: vw(16);
                color: white;
               text-align: center;
            }
        }
        
    }
    .bee-photo:before{
        position: absolute;
        content: "已过期";
        display: block;
        top:0;
        right:0;
        width: vw(92);
        height: vw(38);
        background:rgba(0,0,0,0.2);
        color: white;
        font-size: vw(24);
        line-height: vw(38);
        text-align: center;
    }
    .bee-photo:after{
        position: absolute;
        content: "";
        display: block;
        top:vw(0);
        right:vw(92);
        width:0;
        border-left:0;
        border-top: 0;
        border-bottom:vw(38) solid transparent;
        border-right:vw(8) solid black;
        opacity: .2;
    }
    .bee-photo1{
        width: 100%;
        height: vw(300);
        position: relative;
        margin-bottom: vw(8);
        img{
            width: 100%;
            height: 100%;
        }
        .recruit-font{
            position: absolute;
            top: 0;
            left: 0;
            width:vw(640);
            height: vw(300);
            background: rgba(0,0,0,0.5);
            input[type="button"]{
                width: vw(55);
                height: vw(30);
                margin-left: vw(256);
                background: transparent;
                border: 1px solid white;
                border-radius: vw(8);
                color: white;
                font-size: vw(16);
                margin-top:vw(30)
            }
            input[type="button"]:nth-child(2){
                margin-left: vw(0);
            }
            h1{
                margin-top: vw(10);
                margin-left: vw(214);
                font-size: vw(30);
                font-weight: normal;
                color: white;
                a{
                    font-weight: bolder;
                    padding: 0 vw(10);
                }
            }
            h2{
                margin-top: vw(10);
                font-size: vw(20);
                font-weight: normal;
                color: white;
                margin-left: vw(235);
            }
            h4{
                margin-top: vw(10);
                font-size: vw(20);
                font-weight: normal;
                color: white;
                margin-left: vw(235);
            }
            .recruit-font1{
                width: vw(196);
                height: vw(46);
                background:rgba(0,0,0,0.2);
                border-radius: vw(8);
                margin-left: vw(221);
                margin-top: vw(20);
                h3{
                    text-align: center;
                    line-height: vw(46);
                    color: white;
                    font-size: vw(28);
                    font-weight: normal;
                    opacity: 1;
                }
            }
            p{
                margin-top: vw(10);
                font-size: vw(16);
                color: white;
                opacity: 1;
                margin-left: vw(277);
            }
        }
    }
    .bee-photo1:before{
        position: absolute;
        content: "还有三天截止";
        display: block;
        top:0;
        right:0;
        width: vw(155);
        height: vw(38);
        background:rgba(0,0,0,0.2);
        color: white;
        font-size: vw(24);
        line-height: vw(38);
        text-align: center;
    }
    .bee-photo1:after{
        position: absolute;
        content: "";
        display: block;
        top:vw(0);
        right:vw(155);
        width:0;
        border-left:0;
        border-top: 0;
        border-bottom:vw(38) solid transparent;
        border-right:vw(8) solid black;
        opacity: .2;
    }
}
.recruit-font:hover{
    animation: se 2s ease 1;
}
@keyframes se{
    0%{ transform: scale(.5);}
    100%{transform:scale(1);;}
}

.recruit-fund:hover{
    li:nth-child(1){
        animation: tiaodong1 1s ease 0s infinite;
    }
    li:nth-child(2){
        animation: tiaodong1 1s ease 100ms infinite;
    }
    li:nth-child(3){
        animation: tiaodong1 1s ease 200ms infinite;
    }
    li:nth-child(4){
        animation: tiaodong1 1s ease 300ms infinite;
    }
}
@keyframes tiaodong1{
    0%{transform: translateY(0);}
    50%{transform: translateY(vw(20));}
    100%{transform: translateY(0);} 
}
.recruit-banan2-11{
    animation: mohu 2s linear infinite alternate;
}
@keyframes mohu{
    0%{filter: blur(2px);}
    50%{filter: blur(1px);transform: scale(.9);}
    100%{filter: blur(0px);transform: scale(1);}
}
@keyframes zi{
    0%{transform: translate(300px);}
    25%{transform: translateX(600px);box-shadow: vw(5) vw(0) vw(3) red;}
    50%{transform: translateY(300px);box-shadow: vw(10) vw(0) vw(6) orange;}
    75%{transform: translateX(0px);box-shadow: vw(0) vw(10) vw(6) skyblue;}
    25%{transform: translateY(0px);box-shadow: vw(5) vw(0) vw(3) red,;}
}
